<template>
  <div class="q-px-sm q-py-lg">
    <div
      class="column items-center"
      style="margin-top: 100px; margin-bottom: 100px"
    >
      <t-fab color="purple" icon="keyboard_arrow_up" direction="up">
        <t-fab-action color="primary" @click="onClick" icon="mail" />
        <t-fab-action color="secondary" @click="onClick" icon="alarm" />
      </t-fab>

      <br />

      <t-fab
        color="amber"
        text-color="black"
        icon="keyboard_arrow_left"
        direction="left"
      >
        <t-fab-action
          color="amber"
          text-color="black"
          @click="onClick"
          icon="mail"
        />
        <t-fab-action
          color="amber"
          text-color="black"
          @click="onClick"
          icon="alarm"
        />
      </t-fab>

      <br />

      <t-fab
        color="secondary"
        push
        icon="keyboard_arrow_right"
        direction="right"
      >
        <t-fab-action color="primary" @click="onClick" icon="mail" />
        <t-fab-action color="accent" @click="onClick" icon="alarm" />
      </t-fab>

      <br />

      <t-fab color="accent" glossy icon="keyboard_arrow_down" direction="down">
        <t-fab-action
          color="amber"
          text-color="black"
          @click="onClick"
          icon="mail"
        />
        <t-fab-action
          color="amber"
          text-color="black"
          @click="onClick"
          icon="alarm"
        />
      </t-fab>
    </div>
  </div>
</template>

<script>
  export default {
    setup() {
      return {
        onClick() {
          // console.log('Clicked on a fab action')
        },
      };
    },
  };
</script>
